<template>
	<div class="${table.name}_span">
		<table-span
            :current-page="tabelData.current"
            :page-size="tabelData.size"
            :total="tabelData.total"
            :isShowTool="false"
            :isShowPagePlug="false"
            :size-change="handleSizeChange"
            :current-change="handleCurrentChange">
            <template v-slot:searchItem>
            	<div class="search_item_span">
                    <el-button icon="Search" size="default" type="primary" @click="searchData">查询</el-button>
                </div>
                <div class="search_item_span">
                    <el-button icon="Plus" size="default"
                        type="primary" :disabled="!(btOption.btSaveInfo)"
                        @click="btSaveData">新增数据</el-button>
                </div>
            </template>
            <template v-slot:searchTable>
            	<el-table :data="tabelData.records" size="default" height="100%" style="width: 100%;">
                    <el-table-column align="center" type="index" width="50">
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="240">
                        <template #default="scope">
                            <el-button size="small" :disabled="!(btOption.btDocInfoUpdate)"
                                @click="btUpdateData(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" :disabled="!(btOption.btDocInfoDelete)"
                                @click="btDeleteData(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </table-span>
        <el-dialog :title="dataDialogOption.title" v-model="dataDialogOption.isShow" @close="dataDialogClose"
            :before-close="dataDialogBeforeClose" :close-on-click-modal="false"
            :close-on-press-escape="false" width="420px">
            <el-form ref="dataFormRef" :model="dataForm" :rules="dataFormRules" label-width="80px" size="default">
            
            </el-form>
            <template #footer>
                <el-button size="default" @click="dataDialogCancel">取 消</el-button>
                <el-button size="default" type="primary" @click="dataDialogConfirm">确认</el-button>
            </template>
        </el-dialog>
	</div>
</template>
<script>
import TableSpan from '@/components/table-span.vue';
import {tool} from "@/js/tool.js";
import { ElMessage } from 'element-plus'

export default {
	name: "${entity}",
	data: function(){
		return {
			btOption: {
				
			},
			tabelData: {
	            total: 0,
	            size: 10,
	            current: 1,
	            records: []
            },
            searchCondition: {
            	page: 1,
            	size: 1
            },
            dataDialogOption: {
            	type: 0, //0新增；1修改
            	title: '',
            	isShow: false
            },
            dataForm: {
            	
            },
            dataFormRules: {
            	
            }
		}
	},
	methods: {
		searchData: function(){
			this.searchCondition.page = this.tabelData.current;
			this.searchCondition.size = this.tabelData.size;
        	getDataList(this);
        },
        handleSizeChange: function(size){
            this.searchCondition.size = size;
            this.searchCondition.page = 1;
            getDataList(this);
        },
        handleCurrentChange: function(current){
            this.searchCondition.page = current;
            getDataList(this);
        },
        btSaveData: function(){
        	this.dataDialogOption.title = "新增数据";
            this.dataDialogOption.type = 0;
            this.dataDialogOption.isShow = true;
        },
        btUpdateData: function(index, row){
        	this.dataDialogOption.title = "更新数据";
            this.dataDialogOption.type = 1;
            this.dataDialogOption.isShow = true;
        },
        btDeleteData: function(index, row){
        	const confirmMessage = "是否删除:"+ row +"？";
            const obj = this;
            this.$confirm(confirmMessage).then(function () {
                //执行数据删除
                const param = {}
                deleteData(obj, param);
            }).catch(function () {});
        },
        dataDialogBeforeClose: function(){
        	dialogCloseTips(this);
        },
        dataDialogClose: function(){
        	this.$refs["dataFormRef"].clearValidate();
        },
        dataDialogCancel: function(){
        	dialogCloseTips(this);
        },
        dataDialogConfirm: function(){
        	const obj = this;
        	this.$refs["dataFormRef"].validate(function(valid) {
                if(valid){
                    if(obj.dataDialogOption.type == 0){
                        //新增
                        saveData(obj);
                    }else{
                        //更新
                        updateData(obj);
                    }
                }else{
                    return false;
                }
            });
        }
	},
	created: function(){
	    const menuId = [this.$route.query.menuId]
	    const obj = this;
	    new tool.getAuthorisedRequest(menuId, this.btOption, function(){
	    	getDataList(obj);
	    });
    },
    components: {
    	TableSpan
    }
}

/**
* 获取数据信息列表
*/
function getDataList(app){
	const param = app.searchCondition;
	const url = "";
    tool.formJsonRequest(url,param,null,function(data){
        if(data.code === "0000"){
            app.tabelData.total = data.data.total;
            app.tabelData.size = data.data.size;
            app.tabelData.current = data.data.current;
            app.tabelData.records = data.data.records;
        }else{
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
 * 保存数据信息
 */
function saveData(app){
	const param = app.dataForm;
    const url = "";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            getDataList(app);
            app.dataDialogOption.isShow = false;
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
 * 更新数据信息
 */
function updateData(app){
    const param = app.dataForm;
    const url = "";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            getDataList(app);
            app.dataDialogOption.isShow = false;
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
 * 删除数据信息
 */
function deleteData(app, param){
    const url = "";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            getDataList(app);
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
 * 关闭dialog的提示信息
 * @param app
 */
function dialogCloseTips(app) {
    var confirmMessage = "";
    if (app.dataDialogOption.type == 0) {
        confirmMessage = "是否放弃新增数据信息？";
    } else {
        confirmMessage = "是否放弃修改数据信息？";
    }
    var obj = app;
    app.$confirm(confirmMessage).then(function () {
        obj.dataDialogOption.isShow = false;
    }).catch(function () { });
}
</script>
<style>
.${table.name}_span{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
.search_item_span{
    max-width: 190px;
    height: auto;
    margin-top: 5px;
	margin-left: 10px;
}
</style>
